<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--设备数据-->
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="设备" prop="device">
						<el-select v-model="queryParams.device" placeholder="设备类型" clearable style="width: 240px">
							<el-option v-for="device in types" :key="device.value" :label="device.label"
								:value="device.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
							<el-option v-for="state in status" :key="state.value" :label="state.label"
								:value="state.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" plain icon="el-icon-plus" size="mini"
							@click="handleBind">绑定</el-button>
						<!-- v-hasPermi="['system:user:add']" -->
					</el-col>

					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"
						:columns="columns"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="devices" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" align="center" />

					<!-- 遍历 headers 定义列 -->
					<el-table-column v-for="column in columns" :key="column.key" :label="column.label"
						:prop="column.prop" align="center" v-if="column.visible" show-overflow-tooltip="true">
						<!-- 使用 slot-scope 来根据列类型进行不同的处理 -->
						<template slot-scope="scope">
							<template v-if="column.prop === 'status'"> <!-- 特殊处理状态列 -->
								<el-button size="small" :type="status_map.type[scope.row.status]">
									{{ status_map.status[scope.row.status] }}
								</el-button>
							</template>
							<template v-else> <!-- 常规处理其他列 -->
								{{ scope.row[column.prop] }}
							</template>
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
						<template slot-scope="scope" v-if="scope.row.userId !== 1">
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="handleUpdate(scope.row)">修改</el-button>
							<!-- v-hasPermi="['system:user:edit']" -->
							<el-button size="mini" type="danger" icon="el-icon-delete"
								@click="handleDelete(scope.row)">解绑</el-button>
							<!-- v-hasPermi="['system:user:remove']" -->
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" />
				<!-- @pagination="getList" -->
			</el-col>
		</el-row>

		<!-- 添加或修改设备配置对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="SN" prop="sn">
							<el-input v-model="form.sn" placeholder="请输入设备SN" maxlength="30" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="名称" prop="name">
							<el-input v-model="form.name" placeholder="请输入设备名称" maxlength="30" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="地址" prop="address">
							<el-input v-model="form.address" placeholder="请输入设备所在地址" maxlength="11" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 用户导入对话框 -->
		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
			<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
				:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip text-center" slot="tip">
					<div class="el-upload__tip" slot="tip">
						<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
					</div>
					<span>仅允许导入xls、xlsx格式文件。</span>
					<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
						@click="importTemplate">下载模板</el-link>
				</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFileForm">确 定</el-button>
				<el-button @click="upload.open = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		getList
	} from "@/api/device/device";

	const now = new Date();
	// 获取年份
	const year = now.getFullYear();
	// 获取月份，注意要补零
	let month = now.getMonth() + 1; // 月份是从0开始计数的，所以要加1
	month = month < 10 ? `0${month}` : month;

	// 获取日期，注意要补零
	let date = now.getDate();
	date = date < 10 ? `0${date}` : date;

	// 拼接成'YYYY-MM-DD'格式
	// const day = `${year}-${month}-${date}`;

	// 获取小时
	let hour = now.getHours();
	hour = hour < 10 ? `0${hour}` : hour;

	let min = now.getMinutes();
	min = min < 10 ? `0${min}` : min;

	let sec = now.getSeconds();
	sec = sec < 10 ? `0${sec}` : sec;

	let time = `${year}-${month}-${date} ${hour}:${min}:${sec}`

	export default {
		name: "User",
		dicts: ['sys_normal_disable', 'sys_user_sex'],
		components: {
			Treeselect
		},
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 10,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userName: undefined,
					phonenumber: undefined,
					status: "all",
					device: "charger",
					deptId: undefined
				},
				status_map: {},
				status_options: [],
				types: [],
				columns: [],
				devices: [],

				// //离线在线状态map
				// status_map: {
				// 	status: {
				// 		"0": "离线",
				// 		"1": "在线",
				// 		"2": "故障",
				// 	},
				// 	type: {
				// 		"0": "info",
				// 		"1": "success",
				// 		"2": "danger",
				// 	},
				// },
				// status_options: [{
				// 		value: 'all',
				// 		label: '全部'
				// 	},
				// 	{
				// 		value: 'online',
				// 		label: '在线'
				// 	},
				// 	{
				// 		value: 'offline',
				// 		label: '离线'
				// 	},
				// 	{
				// 		value: 'error',
				// 		label: '故障'
				// 	}
				// ],
				// types: [{
				// 		value: 'charger',
				// 		label: '充电桩'
				// 	}, {
				// 		value: 'ups',
				// 		label: 'UPS'
				// 	},
				// 	{
				// 		value: 'inverter',
				// 		label: '逆变器'
				// 	},
				// ],
				// // 表头列名
				// columns: [{
				// 		key: 0,
				// 		label: `SN`,
				// 		prop: "sn",
				// 		visible: true
				// 	},
				// 	{
				// 		key: 1,
				// 		label: `名称`,
				// 		prop: "name",
				// 		visible: true
				// 	},
				// 	{
				// 		key: 2,
				// 		label: `地址`,
				// 		prop: "address",
				// 		visible: true
				// 	},
				// 	{
				// 		key: 3,
				// 		label: `状态`,
				// 		prop: "status",
				// 		visible: true
				// 	},
				// 	{
				// 		key: 4,
				// 		label: `离线/上线时间`,
				// 		prop: "off_online_time",
				// 		visible: true
				// 	}
				// ],
				// // 设备表格数据
				// devices: [{
				// 		"sn": "sn-0001",
				// 		"name": "ups-0001",
				// 		"address": "实验室",
				// 		"status": "1",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0002",
				// 		"name": "ups-0002",
				// 		"address": "实验室",
				// 		"status": "0",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0003",
				// 		"name": "ups-0003",
				// 		"address": "实验室",
				// 		"status": "1",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0004",
				// 		"name": "ups-0004",
				// 		"address": "实验室",
				// 		"status": "2",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0005",
				// 		"name": "ups-0005",
				// 		"address": "实验室",
				// 		"status": "0",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0006",
				// 		"name": "ups-0006",
				// 		"address": "实验室",
				// 		"status": "1",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0007",
				// 		"name": "ups-0007",
				// 		"address": "实验室",
				// 		"status": "2",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0008",
				// 		"name": "ups-0008",
				// 		"address": "实验室",
				// 		"status": "0",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0009",
				// 		"name": "ups-0009",
				// 		"address": "实验室",
				// 		"status": "1",
				// 		"off_online_time": time
				// 	},
				// 	{
				// 		"sn": "sn-0010",
				// 		"name": "ups-0010",
				// 		"address": "实验室",
				// 		"status": "2",
				// 		"off_online_time": time
				// 	},
				// ],
				// 弹出层标题
				title: "",
				// 部门树选项
				deptOptions: undefined,
				// 是否显示弹出层
				open: false,
				// 部门名称
				deptName: undefined,
				// 默认密码
				initPassword: undefined,
				// 日期范围
				dateRange: [],
				// 岗位选项
				postOptions: [],
				// 角色选项
				roleOptions: [],
				// 表单参数
				form: {},
				defaultProps: {
					children: "children",
					label: "label"
				},
				// 用户导入参数
				upload: {
					// 是否显示弹出层（用户导入）
					open: false,
					// 弹出层标题（用户导入）
					title: "",
					// 是否禁用上传
					isUploading: false,
					// 是否更新已经存在的用户数据
					updateSupport: 0,
					// 设置上传的请求头部
					headers: {
						Authorization: "Bearer " + getToken()
					},
					// 上传的地址
					url: process.env.VUE_APP_BASE_API + "/system/user/importData"
				},
			};
		},
		watch: {
			// 根据名称筛选部门树
			deptName(val) {
				this.$refs.tree.filter(val);
			}
		},
		created() {
			this.getList();
			// this.getDeptTree();
			// this.getConfigKey("sys.user.initPassword").then(response => {
			// 	this.initPassword = response.msg;
			// });
		},
		methods: {
			handleBind() {
				this.$router.push("/bind")
			},
			/** 查询用户列表 */
			getList() {
				this.loading = true;
				getList(this.queryParams).then(res => {
					this.status_map = res.data.status_map;
					this.status_options = res.data.status_options;
					this.types = res.data.types;
					this.devices = res.data.devices;
					// this.total = response.total;
					this.loading = false;
				});
			},
			/** 查询部门下拉树结构 */
			getDeptTree() {
				deptTreeSelect().then(response => {
					this.deptOptions = response.data;
				});
			},
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 节点单击事件
			handleNodeClick(data) {
				this.queryParams.deptId = data.id;
				this.handleQuery();
			},
			// 用户状态修改
			handleStatusChange(row) {
				let text = row.status === "0" ? "启用" : "停用";
				this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
					return changeUserStatus(row.userId, row.status);
				}).then(() => {
					this.$modal.msgSuccess(text + "成功");
				}).catch(function() {
					row.status = row.status === "0" ? "1" : "0";
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					userId: undefined,
					deptId: undefined,
					userName: undefined,
					nickName: undefined,
					password: undefined,
					phonenumber: undefined,
					email: undefined,
					sex: undefined,
					status: "0",
					remark: undefined,
					postIds: [],
					roleIds: []
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [];
				this.resetForm("queryForm");
				this.queryParams.deptId = undefined;
				this.$refs.tree.setCurrentKey(null);
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			// 更多操作触发
			handleCommand(command, row) {
				switch (command) {
					case "handleResetPwd":
						this.handleResetPwd(row);
						break;
					case "handleAuthRole":
						this.handleAuthRole(row);
						break;
					default:
						break;
				}
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				getUser().then(response => {
					this.postOptions = response.posts;
					this.roleOptions = response.roles;
					this.open = true;
					this.title = "添加用户";
					this.form.password = this.initPassword;
				});
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const userId = row.userId || this.ids;
				getUser(userId).then(response => {
					this.form = response.data;
					this.postOptions = response.posts;
					this.roleOptions = response.roles;
					this.$set(this.form, "postIds", response.postIds);
					this.$set(this.form, "roleIds", response.roleIds);
					this.open = true;
					this.title = "修改用户";
					this.form.password = "";
				});
			},
			/** 重置密码按钮操作 */
			handleResetPwd(row) {
				this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					closeOnClickModal: false,
					inputPattern: /^.{5,20}$/,
					inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
					inputValidator: (value) => {
						if (/<|>|"|'|\||\\/.test(value)) {
							return "不能包含非法字符：< > \" ' \\\ |"
						}
					},
				}).then(({
					value
				}) => {
					resetUserPwd(row.userId, value).then(response => {
						this.$modal.msgSuccess("修改成功，新密码是：" + value);
					});
				}).catch(() => {});
			},
			/** 分配角色操作 */
			handleAuthRole: function(row) {
				const userId = row.userId;
				this.$router.push("/system/user-auth/role/" + userId);
			},
			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.userId != undefined) {
							updateUser(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addUser(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const userIds = row.userId || this.ids;
				this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
					return delUser(userIds);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/user/export', {
					...this.queryParams
				}, `user_${new Date().getTime()}.xlsx`)
			},
			/** 导入按钮操作 */
			handleImport() {
				this.upload.title = "用户导入";
				this.upload.open = true;
			},
			/** 下载模板操作 */
			importTemplate() {
				this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
			},
			// 文件上传中处理
			handleFileUploadProgress(event, file, fileList) {
				this.upload.isUploading = true;
			},
			// 文件上传成功处理
			handleFileSuccess(response, file, fileList) {
				this.upload.open = false;
				this.upload.isUploading = false;
				this.$refs.upload.clearFiles();
				this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
					response.msg + "</div>", "导入结果", {
						dangerouslyUseHTMLString: true
					});
				this.getList();
			},
			// 提交上传文件
			submitFileForm() {
				this.$refs.upload.submit();
			}
		}
	};
</script>